<template>
  <div class="app-container">

    <div class="nav">
      <el-date-picker
        v-model="date"
        type="daterange"
        value-format="yyyy-MM-dd"
        align="right"
        @input="DateQuery()"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions">
      </el-date-picker>

      <el-cascader v-model="roomData" :props="props" clearable @change="handleChange"></el-cascader>
      <el-button type="primary" @click="getByQuery">筛选</el-button>


    </div>

    <el-dialog title="申请理由" :visible.sync="dialogFormVisible">
      <el-form>
        <el-form-item>
          <el-input v-model="reverseInfo.commit" placeholder=" 示例：用于面试"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="reserve">确定</el-button>
          <el-button type="danger" @click="dialogFormVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <br><br>
    <el-table
      :data="list"
      border
      fit
      highlight-current-row
    >
      <el-table-column type="date" prop="cover" label="日期" sortable >
        <template   slot-scope="scope" >
          {{scope.row.sliceDate.substring(0,10)}}
        </template>
      </el-table-column>
      <el-table-column prop="beginTime" label="开始时间" />

      <el-table-column prop="endTime" label="结束时间"/>
      <el-table-column prop="roomName" label="会议室"/>

      <el-table-column prop="userName" label="预约人"/>

      <el-table-column type="status" prop="cover" label="状态" sortable >
        <template   slot-scope="scope" >
          <el-tag type="success" v-if="scope.row.state==1">未预约</el-tag>
          <el-tag type="info" v-else>已预约</el-tag>
        </template>
      </el-table-column>


      <el-table-column label="操作" width="200" align="center" prop="sliceId">
        <template slot-scope="scope">
          <el-button v-if="scope.row.state==1" type="primary" size="mini" icon="el-icon-edit" @click="openReserve(scope.row.id)">预约</el-button>
          <el-button v-else-if="scope.row.userId == reverseInfo.userId" type="danger" size="mini" icon="el-icon-edit" @click="openCancel(scope.row.id)">取消预约</el-button>
          <el-button v-else type="info" size="mini"  disabled>预约</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import userClient from "../../api/userClient"
import kind from "../../api/kind";
import room from "../../api/room";
export default {
  data() {
    return {
      list: null,//查询后的接口集合
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            end.setTime(start.getTime() + 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            end.setTime(start.getTime() + 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            end.setTime(start.getTime() + 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      date: '',
      roomData:[],
      reverseInfo:{
        sliceId:'',
        //todo
        userId:'1553325901993742338',
        commit:''
      },
      dialogFormVisible:false,
      querySliceVo:{
        beginTime:"null",
        endTIme: "null",
        roomId:"null"
      },
      props: {
        lazy: true,

        expandTrigger: "hover",
        lazyLoad(node, resolve) {
          setTimeout(() => {
            const { level } = node;
            if (level == 0) {
              kind.list()
                .then(res => {
                  const kind = res.data.list.map((value, i) => ({
                    value: value.kind,
                    label: value.kind,
                    leaf:  level >= 1
                  }));
                  resolve(kind);
                })
            }
            else if(level==1){
              room.getQuery(node.value,null)
                .then(res => {
                  const room = res.data.list.map((value, i) => ({
                    value: value.id,
                    label: value.name+"("+value.capacity+")",
                    leaf: level >= 1
                }));
                  resolve(room);
              })
            }else {
              resolve(null)
            }
          }, 0);
        }
      },
    }
  },
  created() {
    this.getByQuery()
  },
  methods: {

    openReserve(sliceId){
      this.reverseInfo.sliceId = sliceId
      this.dialogFormVisible = true;
    },
    reserve(){
      console.log(this.reverseInfo)
      userClient.reverse(this.reverseInfo)
        .then(response=>{
          this.$message({
            type: "success",
            message: "预约成功！"
          })
          this.dialogFormVisible = false;
          this.getByQuery()
        })
    },
    openCancel(sliceId) {
      this.$confirm('此操作将取消预约, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        userClient.cancelBySliceId(sliceId)
        .then(response=>{
          this.$message({
            type: 'success',
            message: '取消预约成功!'
          });
          this.getByQuery()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    getByQuery(){
      userClient.getByQuery(this.querySliceVo)
      .then(response=>{
        this.list = response.data.list
      })
    },

    handleChange(){
      if(this.roomData[1]==null){
        this.querySliceVo.roomId = "null"

      }else{
        this.querySliceVo.roomId = this.roomData[1]
      }
    },

    DateQuery(e){
      if(e == null){
        this.querySliceVo.beginTime = "null"
        this.querySliceVo.endTIme = "null"
      }
      this.querySliceVo.beginTime = this.date[0]
      this.querySliceVo.endTIme = this.date[1]
    }
  }
}
</script>
<style>
</style>
